<template>
  <div class="wang-editor">
    <div id="editor" class="editor">
      <span>{{ msg }}</span>
    </div>
    <el-button type="primary" @click="getEditorData" style="margin-top: 20px"
      >立即创建</el-button
    >
  </div>
</template>

<script>
import Editor from 'wangeditor'
export default {
  name: 'Editor',
  data() {
    return {
      editor: null,
      // editorContent: '',
      msg: '开始创作吧!', //富文本编辑器中默认初始化的内容
    }
  },
  mounted() {
    this.createEditor()
  },
  methods: {
    //向父组件传值
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      this.$emit('submitContent', data)
    },
    //创建富文本编辑器
    createEditor() {
      //一、将头部和编辑的区域不分开的富文本编辑器
      this.editor = new Editor('#editor')
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo', // 重复
      ] //编辑器头部的操作功能菜单
      this.editor.config.onchangeTimeout = 1000 //编辑内容改变的函数的时间等待
      // 配置 onchange 回调函数，将数据同步到 vue 中
      this.editor.config.onchange = (newHtml) => {
        this.editorContent = newHtml
        console.log(this.editorContent)
      }
      this.editor.config.zIndex = 100000 //同时改变头部和编辑区的z-index
      this.editor.config.pasteFilterStyle = false //去除粘贴文本时自带 的样式
      this.editor.config.pasteIgnoreImg = true //去除粘贴时自带的图片
      this.editor.config.pasteTextHandle = function (content) {
        //粘贴文本时的函数
        console.log(content) //打印粘贴的文本
      } //粘贴文本时的函数
      this.editor.config.onblur = function (html) {
        //编辑器失去焦点
        console.log('onblur')
        //console.log(html) //编辑器中的内容
        //this.editorContent = html
      } //编辑器失去焦点
      this.editor.config.onfocus = function () {
        //编辑器获得焦点
        //console.log('onfocus')
      } //编辑器获得焦点
      this.editor.config.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff',
      ] //自定义配置颜色（字体颜色、背景色）
      this.editor.create()
    },
  },
}
</script>
